<template>
	<view>
		<!-- 搜索框 -->
		<!-- #ifdef MP-WEIXIN -->
		<search-input></search-input>
		<!-- #endif -->
		<!-- 轮播图 -->
		<l-banner :bannerList="bannerList"></l-banner>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<!-- 导航 -->
			<l-nav :navList="navList"></l-nav>

			<view class="list_wrap">
				<!-- 热门推荐 -->
				<l-list name="热门推荐" word="HOT" :courseData="hotCourseList"></l-list>

				<!-- 近期上新 -->
				<l-scroll name="近期上新" word="New" :courseData="newCourseList"></l-scroll>

				<!-- 免费精选 -->
				<l-list name="免费精选" word="FREE" :courseData="freeCourseList"></l-list>

				<!-- 付费精品 -->
				<l-list name="付费精品" word="NICE" :isSwiper="false" :courseData="payCourseList"></l-list>
			</view>
		</mescroll-body>
	</view>

	</view>
</template>

<script>
	// 子组件
	import searchInput from "../../components/search-input.vue"
	import lBanner from "./components/l-banner.vue"
	import lNav from "./components/l-nav.vue"
	import lList from "./components/l-list.vue"
	import lScroll from "./components/l-scroll.vue"

	// 引入插件 mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	// apis
	import {
		IndexModel
	} from "@/common/apis/index.js"
	const indexModel = new IndexModel()

	export default {
		mixins: [MescrollMixin],
		components: {
			searchInput,
			lBanner,
			lNav,
			lList,
			lScroll
		},
		data() {
			return {
				placeholderData: [],
				bannerList: [],
				navList: [],
				hotCourseList: [],
				newCourseList: [],
				freeCourseList: [],
				payCourseList: [],
				downOption: {},
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: '-- 我也是有底线的 --'
				},
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.changePlaceholder()
			// #endif

			this.getBannerList()
		},

		// 监听原生标题栏按钮点击事件 => 扫描二维码  
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.scanCode({
					success: function(res) {
						uni.navigateTo({
							url: `/pages/public/web-view?url=` + res.result
						})
					}
				});
			}

		},

		methods: {
			// 搜索框数据动态显示
			changePlaceholder() {
				const currentWebview = this.$scope.$getAppWebview();
				let arr = ['App · 微信小程序', 'Java · SprinBoot', 'SpringClond · SpringSecurity', 'Vue · React'];
				let index = 0;
				setInterval(() => {
					index = index < 3 ? ++index : 0
					currentWebview.setStyle({
						titleNView: {
							searchInput: {
								placeholder: arr[index]
							}
						}
					})
				}, 3000)
			},

			// banner
			async getBannerList() {
				const {
					data: {
						code,
						data
					}
				} = await indexModel.getBannerList(1)
				if (code === 20000) {
					this.bannerList = data
				}
			},


			// 获取导航
			async getLabelList() {
				const {
					data: {
						code,
						data
					}
				} = await indexModel.getLabelList()
				if (code === 20000) {
					this.navList = data;
				}
			},

			// 热门推荐
			async getHotCourseData() {
				const {
					data: {
						code,
						data: {
							total,
							records
						}
					}
				} = await indexModel.getCourseList({
					sort: 'hot'
				}, 1, 8)
				if (code === 20000) {
					this.hotCourseList = records;
				}
			},
			// 近期上新
			async getNewCourseData() {
				const {
					data: {
						code,
						data: {
							total,
							records
						}
					}
				} = await indexModel.getCourseList({
					sort: 'new'
				}, 1, 8)
				if (code === 20000) {
					this.newCourseList = records;
				}
			},
			// 免费精选
			async getFreeCourseData() {
				const {
					data: {
						code,
						data: {
							total,
							records
						}
					}
				} = await indexModel.getCourseList({
					isFree: 1
				}, 1, 8)
				if (code === 20000) {
					this.freeCourseList = records;
				}
			},
			// 付费精品
			async getPayCourseData() {
				const {
					data: {
						code,
						data: {
							total,
							records
						}
					}
				} = await indexModel.getCourseList({
					isFree: 0
				}, 1, 8)
				if (code === 20000) {
					this.payCourseList = records;
				}
			},

			// 初始化
			mescrollInit() {},
			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			// 上拉加载
			async upCallback(page) {
				if (page.num == 1) {
					this.getLabelList()
					this.getHotCourseData()
					this.getNewCourseData()
					this.getFreeCourseData()
					this.getPayCourseData()
				}

				const {
					data: {
						code,
						data: {
							total,
							records
						}
					}
				} = await indexModel.getCourseList({
					isFree: 0
				}, page.num, page.size);

				// 设置列表数据
				if (page.num == 1) this.payCourseList = []; //如果是第一页需手动置空列表
				this.payCourseList = this.payCourseList.concat(records); //追加新数据
				this.mescroll.endByPage(records.length, total);
			}
		}
	}
</script>

<style scoped>
	.list_wrap {
		padding: 20rpx;
	}
</style>
